---
title: Alert Dialog
description: A modal dialog that interrupts the user with important content and expects a response.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/alert-dialog?raw';

<LinkButton href='https://rn-primitives.vercel.app/alert-dialog'>Alert Dialog Primitive</LinkButton>
<LinkButton href='/components/button'>Button Component</LinkButton>
<LinkButton href='/components/text'>Text Component</LinkButton>
<LinkButton target='_blank' href='https://rnr-showcase.vercel.app/alert-dialog'>
  Demo
</LinkButton>

<br />

A modal dialog that interrupts the user with important content and expects a response.

### Installation
<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add alert-dialog
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type='tip' title='Dependencies'>
      Before copy/pasting, add the <a href='https://rn-primitives.vercel.app/alert-dialog' className='text-white font-bold'> alert-dialog primitive</a>, the <a href='/components/button' className='text-white font-bold'>button component</a>, and the <a href='/components/text' className='text-white font-bold'>text component</a> to your project.
    </Aside>

    <br />

    **Copy/paste the following code to `~/components/ui/alert-dialog.tsx`:**

    <Code code={importedCode} lang='tsx' title='~/components/ui/alert-dialog.tsx' />
  </TabItem>
</Tabs>
### Usage

<Aside type="caution">

  Requires a `<PortalHost />` as the last child of your `<Root/>` (`app/_layout.tsx`) component

  ```tsx
  import { PortalHost } from '@rn-primitives/portal';

  function Root() {
    return (
      <>
        <Stack />
        {/* Default Portal Host (one per app) */}
        <PortalHost />
      </>
    );
  }
  ```

</Aside>

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '~/components/ui/alert-dialog';
import { Button } from '~/components/ui/button';
import { Text } from '~/components/ui/text';

function AlertDialogScreen() {
  return (
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant='outline'>
            <Text>Show Alert Dialog</Text>
          </Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete your account and remove
              your data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>
              <Text>Cancel</Text>
            </AlertDialogCancel>
            <AlertDialogAction>
              <Text>Continue</Text>
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
  );
}
```

## Props

### AlertDialog

Extends [`View`](https://reactnative.dev/docs/view#props) props

|     Prop     |           Type           |     Note     |
| :----------: | :----------------------: | :----------: |
|   asChild    |         boolean          | _(optional)_ |
|     open     |         boolean          | _(optional)_ |
| onOpenChange | (value: boolean) => void | _(optional)_ |
| defaultOpen  |         boolean          | _(optional)_ |

### AlertDialogTrigger

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| asChild | boolean | _(optional)_ |

### AlertDialogContent

Extends [`View`](https://reactnative.dev/docs/view#props) props

|       Prop       |        Type         |         Note          |
| :--------------: | :-----------------: | :-------------------: |
|     asChild      |       boolean       |     _(optional)_      |
|    forceMount    |  true \| undefined  |     _(optional)_      |
|       alignOffset       |                    number                    | Native Only _(optional)_       |
|         insets          |                    Insets                    | Native Only _(optional)_       |
|     avoidCollisions     |                   boolean                    | Native Only _(optional)_       |
|          align          |         'start' \| 'center' \| 'end'         | Native Only _(optional)_       |
|          side           |              'top' \| 'bottom'               | Native Only _(optional)_       |
|       sideOffset        |                    number                    | Native Only _(optional)_       |
| disablePositioningStyle |                   boolean                    | Native Only _(optional)_ |
| onOpenAutoFocus  | (ev: Event) => void | Web Only _(optional)_ |
| onCloseAutoFocus | (ev: Event) => void | Web Only _(optional)_ |
| onEscapeKeyDown  | (ev: Event) => void | Web Only _(optional)_ |

### AlertDialogHeader

Extends [`View`](https://reactnative.dev/docs/view#props) props

### AlertDialogTitle

Extends [`Text`](https://reactnative.dev/docs/text#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| asChild | boolean | _(optional)_ |

### AlertDialogDescription

Extends [`Text`](https://reactnative.dev/docs/text#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| asChild | boolean | _(optional)_ |

### AlertDialogFooter

Extends [`View`](https://reactnative.dev/docs/view#props) props

### AlertDialogCancel

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| asChild | boolean | _(optional)_ |

### AlertDialogAction

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| asChild | boolean | _(optional)_ |
